﻿@page "/component/input/calendar" 

<Pager DataSource="@(new List<string>
                     {
                         "Demo","ViewMode","Custom Week Text","Custom Month text","Color","TodayColor","Two-way Binding","Inverted"
                     })">
    <Body>
        <Header1>
            Calendar
            <SubHeader>A calendar allows users to select any date or time</SubHeader>
        </Header1>
        <PresentationPart Title="Demo">
            <RunTemplate>
                <Calendar />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Calendar />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="ViewMode">
            <Description>
                Display different view mode of calendar.
            </Description>
            <RunTemplate>
                <Header3>Month View Mode</Header3>
                <Calendar ViewMode="CalendarViewMode.Month" />
                <Header3>Year View Mode</Header3>
                <Calendar ViewMode="CalendarViewMode.Year" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Calendar ViewMode=""CalendarViewMode.Month"" />
<Calendar ViewMode=""CalendarViewMode.Year"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Custom Week Text">
            <RunTemplate>
                <Calendar WeekMapExpression="@(week=>
                                               {
                                                   week[DayOfWeek.Monday] = "M";
                                                   week[DayOfWeek.Tuesday] = "T";
                                                   week[DayOfWeek.Wednesday] = "W ";
                                                   week[DayOfWeek.Thursday] = "T";
                                                   week[DayOfWeek.Friday] = "F";
                                                   week[DayOfWeek.Saturday] = "S";
                                                   week[DayOfWeek.Sunday] = "S";
                                               })"/>
            </RunTemplate>
            <CodeTemplate>
@Code.GetCode(@"
```html
<Calendar WeekMapExpression=""@(week=>
                                {
                                    week[DayOfWeek.Monday] = ""M"";
                                    week[DayOfWeek.Tuesday] = ""T"";
                                    week[DayOfWeek.Wednesday] = ""W "";
                                    week[DayOfWeek.Thursday] = ""T"";
                                    week[DayOfWeek.Friday] = ""F"";
                                    week[DayOfWeek.Saturday] = ""S"";
                                    week[DayOfWeek.Sunday] = ""S"";
                                })""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Custom Month text">
            <RunTemplate>
                <Calendar ViewMode="CalendarViewMode.Month" MonthMapExpression="@(month=>month.Clear())" />
                <Calendar ViewMode="CalendarViewMode.Month" Year="2012" MonthMapExpression="@(month=>
                                                                                              {
                                                                                                  month[CalendarMonth.Janurary] = "Jan.";
                                                                                                  month[CalendarMonth.February] = "Feb.";
                                                                                                  month[CalendarMonth.March] = "Mar.";
                                                                                                  month[CalendarMonth.April] = "Apr.";
                                                                                                  month[CalendarMonth.May] = "May.";
                                                                                                  month[CalendarMonth.June] = "Jun.";
                                                                                                  month[CalendarMonth.July] = "Jul.";
                                                                                                  month[CalendarMonth.Augest] = "Aug.";
                                                                                                  month[CalendarMonth.September] = "Sep.";
                                                                                                  month[CalendarMonth.October] = "Oct.";
                                                                                                  month[CalendarMonth.November] = "Nov.";
                                                                                                  month[CalendarMonth.December] = "Dec.";
                                                                                              })" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Calendar ViewMode=""CalendarViewMode.Month"" MonthMapExpression=""@(month=>month.Clear())""/>
<Calendar ViewMode=""CalendarViewMode.Month"" Year=""2012"" MonthMapExpression=""@(month=>
                                                                                {
                                                                                    month[CalendarMonth.Janurary] = ""Jan."";
                                                                                    month[CalendarMonth.February] = ""Feb."";
                                                                                    month[CalendarMonth.March] = ""Mar."";
                                                                                    month[CalendarMonth.April] = ""Apr."";
                                                                                    month[CalendarMonth.May] = ""May."";
                                                                                    month[CalendarMonth.June] = ""Jun."";
                                                                                    month[CalendarMonth.July] = ""Jul."";
                                                                                    month[CalendarMonth.Augest] = ""Aug."";
                                                                                    month[CalendarMonth.September] = ""Sep."";
                                                                                    month[CalendarMonth.October] = ""Oct."";
                                                                                    month[CalendarMonth.November] = ""Nov."";
                                                                                    month[CalendarMonth.December] = ""Dec."";
                                                                                })"" />
```
")
            </CodeTemplate>
        </PresentationPart>
                <PresentationPart Title="Color">
            <RunTemplate>
                <Calendar Color="Color.Red"/>
                <Calendar Color="Color.Green"/>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Calendar Color=""Color.Red""/>
<Calendar Color=""Color.Green""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="TodayColor">
            <RunTemplate>
                <Calendar TodayColor="Color.Red"/>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Calendar TodayColor=""Color.Red""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Two-way Binding">
            <Description>
                <Message State="State.Info">
                    Support <code>DateTime?</code> for Two-Way Binding.
                </Message>
            </Description>
            <RunTemplate>
                <Calendar @bind-Value="date" />
                @date
                <br />
                <Calendar @bind-Value="month" ViewMode="CalendarViewMode.Month" />
                @month
                <br />
                <Calendar @bind-Value="year" ViewMode="CalendarViewMode.Year" />
                @year
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Calendar @bind-Value=""date"" />
@date
<br />
<Calendar @bind-Value=""month"" ViewMode=""CalendarViewMode.Month"" />
@month
<br />
<Calendar @bind-Value=""year"" ViewMode=""CalendarViewMode.Year"" />
@year
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <RunTemplate>
                <Segment Inverted>
                    <Calendar Inverted />
                    <Calendar Inverted Color="Color.Green" TodayColor="Color.Black" />
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment Inverted>
    <Calendar Inverted />
    <Calendar Inverted Color=""Color.Green"" TodayColor=""Color.Black"" />
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>
@code{ 
    DateTime? date;
    DateTime? month;
    DateTime? year;
}